﻿<!DOCTYPE html>
<html>
<head>
    <title>常规题型</title>
</head>
<body>
<div>
	<p>use strict</p>
	<p>去除with语句,严格模式使用with会报错!</p>
    <p>防止意外的全局变量 (例："use strict"; var xx = uu = 1; 在这里uu就会报错,因为没有使用var申明uu) </p>
    <p>取消this值的强制转换. (例：function Person(name){this.name = name;};Person(); 这里直接调用会报错，必须强制指定this的值或者var x = new Person("小明"); 建议使用 Person.call(this,"小明") 或者.apply 或者 Person.bind(this)(); 来绑定this。</p>
	<p>拒绝重复 (例：function news(title,content,title){} 这里就会语法错误，因为参数名重复。或者 var obj = {name:"张三",name:"李四"} 这里也会语法错误，因为两个属性名严格模式下不可以一致)</p>
	<p>更安全的eval()  (例：!function() {eval("var x = 10;");alert(x);}() 这里会报错，因为严格模式下在eval()语句中声明的变量以及函数不会在包含域中创建 )</p>
	<p>不可改变引发的错误  (例：var person = {};Object.defineProperty(person, "name" {writable: false,value: "Nicholas"}); person.name = "John"; 严格模式修改不被允许的属性会报错!)    ECMAScript 5 同时引入了修改属性特征的能力，例如设置一个属性为只读或者冻结整个对象的结构，在非严格模式下，试图修改一个不可变的属性时将悄无声息地失败。严格模式将保证无论你在何时试图使用一种不被允许的方式修改一个对象或对象的属性时抛出错误</p>
	<p>优点：其一：如果在语法检测时发现语法问题，则整个代码块失效，并导致一个语法异常。
其二：如果在运行期出现了违反严格模式的代码，则抛出执行异常。
缺点：js文件在进行压缩合并的时候可能出现重复的"use strict"; 声明，也可能出现不支持严格模式的代码被合并了出现问题</p>
</div>

<div>
	<p>@imort link</p>
	<p>资源文件引入 sass引入其它模块文件</p>

</div>

<div>
	<p>appy call</p>
	<p>两个方法产生的作用是完全一样的,方法传递的参数不同</p>
	<p>当参数明确时可用call, 当参数不明确时可用apply给合arguments</p>
</div>

<div>
    <p>移动端兼容怎么处理</p>
	<p>根据app在各品牌手机占比排名前15的机型进行兼容性测试</p>	
	<p></p>
	<p></p>
	<p></p>
</div>

<div>
    <p>position 定位</p>
	<p>absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p>	
	<p>fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。</p>
	<p>relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。</p>
	<p>static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</p>
	<p>inherit：规定应该从父元素继承 position 属性的值。</p>
</div>

<div>
	<p>移动端300ms延迟与tap穿透问题</p>
	<p>click与tap都是触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。</p>
	<p>200-300ms延迟 主要原因是 设备300ms内判断是否双击两次的缩放动作</p>
	<p>使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会浮层关闭后，浮层后面的元素会在200-300ms延迟出现点击事件</p>
</div>

<div>
	<p>eval()函数</p>
	<p>计算字符串参数，并执行其中的的 JavaScript 代码</p>
	<p>通过计算 string 得到的值（如果有的话）。</p>
	<p>var val = eval('var a =1,b=2;a+b'); 可以接收到返回值</p>
</div>

<div>
	<p>parseInt 传值 </p>
	<p>函数可解析一个字符串，并返回一个整数</p>
    <p>parseInt(string, radix)</p>
	<p>string	必需。要被解析的字符串。</p>
    <p>radix    可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。举例，如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。</p>
</div>

<div>
	<p>H5储存</p>
	<p>localStorage和sessionStorage</p>
    <p>ocalStorage.setItem(“key”，“value”)//存储</p>
	<p>localStorage.getItem(key)//按key进行取值</p>
	<p>localStorage.valueOf()//获取全部值</p>
	<p>localStorage.removeItem(key)//删除单个值</p>
	<p>localStorage.clear()//删除全部数据</p>
	<p>localStorage.length//获得数据的数量</p>
	<p>localStorage.key(N)//获得第N个数据的key值</p>
	<p>cookie读写</p>
    <p>window.document.cookie</p>
	<p>manifest 做离线缓存</p>
	<p>WebSQL 使用</p>
	<p>通过SQL语句形式来建表写字段，增删改查数据，类似关系型数据库！</p>
	<p>IndexedDB 使用</p>
	<p>IndexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。每个对象可以用key值获取。</p>
	<p>IndexedDB很适合存储大量数据，它的API是异步调用的。IndexedDB使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多，但它的API也相对复杂。对于简单的数据，你应该继续使用localstorage，但当你希望存储大量数据时，IndexedDB会明显的更适合，IndexedDB能提供你更为复杂的查询数据的方式。</p>
</div>

<div>
	<p>一个请求到响应的过程</p>
	<p>浏览器查找IP地址，根据dns缓存查找</p>
    <p>浏览器发送http请求</p>
	<p>服务端接收并处理报文</p>
	<p>服务端发送响应报文</p>
    <p>浏览器接收报文</p>
    <p>解析html构建dom树</p>
    <p>构建render树</p>
	<p>布局render树</p>
    <p>绘制render树</p>
	<p>http://www.68idc.cn/help/makewebs/qitaasks/20160530618191.html</p>
</div>

<div>
	<p>性能优化</p>
	<p>图片 ，css ，js 资源压缩合并</p>
    <p>cdn 加速</p>
	<p>服务器端采用gzip压缩</p>
    <p>css置于页面前面，js置于页面后面，提高渲染性能</p>
	<p>避免使用css表达式</p>
	<p>将js和css文件作为外部文件使用，提高复用性</p>
	<p>避免重定向(301永久重定向，302临时重定向)</p>
	<p>使用ajax缓存</p>
	<p>减少Cookie</p>
	<p>使用CSS3，svg ，IconFont 代替图片</p>
    <p>减少Dom操作，缓存DOM选择与计算，尽量使用ID选择器，尽量使用事件代理，避免使用批量绑定事件</p>
	<p>适量使用css3动画和canvas动画</p>
	<p></p>
	<p></p>
    <p></p>
	<p></p>
    <p></p>
	<p></p>
</div>

<div>
	<p>display 属性</p>
	<p>none	此元素不会被显示。</p>
	<p>block	此元素将显示为块级元素，此元素前后会带有换行符。</p>
	<p>inline	默认。此元素会被显示为内联元素，元素前后没有换行符。</p>
	<p>inline-block	行内块元素。（CSS2.1 新增的值）</p>
	<p>list-item	此元素会作为列表显示。</p>
    <p></p>
	<p></p>
    <p></p>
	<p></p>
</div>

<div>
	<p>js 异步加载</p>
	<p>启用async与defer来进行异步加载，避免阻止DOM解析和渲染。(async 脚本在script文件下载完成后会立即执行(所以不要有模块依赖),并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。与此相对，浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后执行)</p>
    <p></p>
	<p></p>
    <p></p>
	<p></p>
</div>

<div>
    <p>js 兼容  css兼容</p>
	<p>IE下可获取window.event ，其它浏览器只能在事件回调中获取</p>
    <p>IE8 下parseInt(’08′)返回0， parseInt(i,10);加入第二个参数代表待转换的为10进制数</p>
	<p></p>
	<p></p>
	<p></p>
</div>

<div>
    <p>判断一个对象</p>
	<p> typeof 判断类型</p>
    <p> instanceof 判断一个对象是否另一个对象的实例</p>
</div>

<div>
    <p>单页面路由实现原理</p>
	<p> 1. history.pushState和history.replaceState不会触发hashchange事件</p>
	<p> 2.浏览器的前进与后退，会触发window.onpopstate事件,页面前进和后退不会请求url地址</p>
	<p>3.点击href="#hash1"标签和使用 location.hash =“hash2”会触发 hashchange事件</p>
</div>

<div>
    <p>单页面seo</p>
	<p>尽量在后端渲染</p>
	<p>部分爬虫支持js执行</p>
</div>

<div>
    <p>居中</p>
	<p>position：absolute 定位left：50%；top:50% margin-left:负的一半宽，margin-rigth：负的的一半高，或者transform:translate(50%,50%)</p>
    <p>fixed: 相对浏览器定位</p>
</div>

<div>
	<p>跨域</p>
	<p>jsonp 和 CORS 跨域</p>
</div>

<div>
	<p>Angular 和 React</p>
	<p>Angular是真正的大而全的framework，可以直接进行开发</p>
    <p>React是一个简短有力的library,相当于MVC中的V，开发完整的应用必须结合redux，react-router等组件</p>
</div>

<div>
    <p>异步上传</p>
    <p>formData 添加图片 通过 XMLHttpRequest 上传</p>
    <p> iframe 完成上传</p>
    <p></p>
    <p></p>
</div>

<div>
	<p>字符串转成json对象的方式</p>
    <p>eval('({"name":"255"})');</p>
    <p>JSON.parse('{"zzz":"asd"}');</p>
    <p>(new Function("return " + "{'qqq':'ww'}"))(); </p>
</div>

<div>
	<p>DOCTYPE</p>
	<p>告诉浏览器，页面使用哪个 HTML 版本进行编写的指令</p>
</div>

<dic>
	<p>transition, transform, animation；我分别理解为过渡，变换，动画</p>
</dic>

<div>
	<p>ES6</p>
	<p>箭头操作符:代替function声明</p>
	<p>类的支持：可以使用class关键字</p>
	<p>增强的对象字面量：直接声明__proto__:原型对象，和函数</p>
	<p>字符串模板：var num = 1; console.log("number is ${num}")</p>
	<p>参数默认值：function student(name = '小明'){ console.log(name);}</p>
	<p>let 关键字 ：定义变量在特定范围内使用 for(let i=0;i<3;i++) console.log(i)</p>
	<p>const 关键字：定义不可更改的常量</p>
	<p></p>
	<p></p>
	<p></p>
</div>

<script type="text/javascript">
//1.原型 原型链 

//2.use strict   @imort link

//3.appy call

//4. 有没仿echarts

//5. 移动端兼容怎么处理

//6. eval作用

//7.parseInt 传值 

//8. H5储存

//9.一个请求到响应的过程

//10. 性能优化

//11. js异步加载

//12.js 兼容  css兼容 

//13. 判断一个对象

//14.单页面路由实现原理

//15 单页面seo

//16. 居中

//17. 跨域

//18. angular 与 react 优缺点

//19. 异步上传

//20,  字符串转成json对象的方式

</script>

</body>
</html>